<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网站收藏</title>
    <!-- 引入Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css">
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2980b9;
            --accent-color: #e74c3c;
            --text-color: #333;
            --light-color: #f5f5f5;
            --dark-color: #2c3e50;
            --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--light-color);
            padding-bottom: 2rem;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        header {
            background-color: var(--dark-color);
            color: white;
            padding: 1.5rem 0;
            margin-bottom: 2rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: bold;
            display: flex;
            align-items: center;
        }

        .logo i {
            margin-right: 0.5rem;
            color: var(--primary-color);
        }

        .search-box {
            display: flex;
            max-width: 500px;
            width: 100%;
        }

        .search-box input {
            flex: 1;
            padding: 0.7rem 1rem;
            border: none;
            border-radius: 4px 0 0 4px;
            font-size: 1rem;
        }

        .search-box button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 0 1.2rem;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .search-box button:hover {
            background-color: var(--secondary-color);
        }

        .controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        .category-filter {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .category-btn {
            background-color: white;
            border: 1px solid #ddd;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .category-btn:hover, .category-btn.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        .view-toggle {
            display: flex;
            gap: 0.5rem;
        }

        .view-btn {
            background-color: white;
            border: 1px solid #ddd;
            width: 40px;
            height: 40px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
        }

        .view-btn:hover, .view-btn.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        .websites-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }

        .websites-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .website-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .website-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .website-card .card-header {
            padding: 1.2rem;
            border-bottom: 1px solid #eee;
        }

        .website-card .card-body {
            padding: 1.2rem;
        }

        .website-card h3 {
            margin-bottom: 0.5rem;
            color: var(--dark-color);
        }

        .website-card a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }

        .website-card a:hover {
            color: var(--secondary-color);
            text-decoration: underline;
        }

        .website-card p {
            color: #666;
            margin-bottom: 1rem;
        }

        .website-card .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 1rem;
        }

        .website-card .tag {
            background-color: #f0f0f0;
            padding: 0.3rem 0.6rem;
            border-radius: 4px;
            font-size: 0.8rem;
            color: #666;
        }

        .website-list-item {
            background-color: white;
            border-radius: 8px;
            padding: 1.2rem;
            box-shadow: var(--card-shadow);
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .website-list-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        }

        .website-list-item .website-info {
            flex: 1;
        }

        .website-list-item h3 {
            margin-bottom: 0.5rem;
        }

        .website-list-item .website-link {
            margin-left: 1rem;
        }

        .website-list-item .website-link a {
            display: inline-block;
            background-color: var(--primary-color);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            text-decoration: none;
            transition: background-color 0.3s;
        }

        .website-list-item .website-link a:hover {
            background-color: var(--secondary-color);
        }

        .empty-state {
            text-align: center;
            padding: 3rem;
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--card-shadow);
        }

        .empty-state i {
            font-size: 3rem;
            color: #ddd;
            margin-bottom: 1rem;
        }

        .empty-state h3 {
            margin-bottom: 0.5rem;
            color: #666;
        }

        .empty-state p {
            color: #999;
        }

        footer {
            text-align: center;
            margin-top: 3rem;
            padding: 1.5rem 0;
            color: #666;
            font-size: 0.9rem;
        }

        @media (max-width: 768px) {
            header .container {
                flex-direction: column;
                gap: 1rem;
            }

            .search-box {
                width: 100%;
            }

            .controls {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }

            .websites-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <header>
            <div class="container">
                <div class="logo">
                    <i class="fas fa-bookmark"></i>
                    <span>我的网站收藏</span>
                </div>
                <div class="search-box">
                    <input type="text" v-model="searchQuery" placeholder="搜索网站..." @input="filterWebsites">
                    <button><i class="fas fa-search"></i></button>
                </div>
            </div>
        </header>

        <div class="container">
            <div class="controls">
                <div class="category-filter">
                    <button class="category-btn" :class="{active: selectedCategory === ''}" @click="selectCategory('')">全部</button>
                    <button v-for="category in categories" :key="category" 
                            class="category-btn" :class="{active: selectedCategory === category}"
                            @click="selectCategory(category)">
                        {{ category }}
                    </button>
                </div>
                <div class="view-toggle">
                    <button class="view-btn" :class="{active: viewMode === 'grid'}" @click="viewMode = 'grid'">
                        <i class="fas fa-th"></i>
                    </button>
                    <button class="view-btn" :class="{active: viewMode === 'list'}" @click="viewMode = 'list'">
                        <i class="fas fa-list"></i>
                    </button>
                </div>
            </div>

            <div v-if="filteredWebsites.length > 0">
                <!-- 网格视图 -->
                <div v-if="viewMode === 'grid'" class="websites-grid">
                    <div v-for="website in filteredWebsites" :key="website.id" class="website-card">
                        <div class="card-header">
                            <h3>
                                <a :href="website.url" target="_blank">{{ website.name }}</a>
                            </h3>
                        </div>
                        <div class="card-body">
                            <p>{{ website.description }}</p>
                            <div class="tags">
                                <span class="tag">{{ website.category }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 列表视图 -->
                <div v-else class="websites-list">
                    <div v-for="website in filteredWebsites" :key="website.id" class="website-list-item">
                        <div class="website-info">
                            <h3>{{ website.name }}</h3>
                            <p>{{ website.description }}</p>
                        </div>
                        <div class="website-link">
                            <a :href="website.url" target="_blank">
                                <i class="fas fa-external-link-alt"></i> 访问
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 空状态 -->
            <div v-else class="empty-state">
                <i class="fas fa-search"></i>
                <h3>未找到匹配的网站</h3>
                <p>请尝试使用不同的搜索词或筛选条件</p>
            </div>
        </div>

        <footer>
            <div class="container">
                <p>&copy; {{ new Date().getFullYear() }} 我的网站收藏. 保留所有权利.</p>
            </div>
        </footer>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                searchQuery: '',
                selectedCategory: '',
                viewMode: 'grid',
                websites: [
                    {
                        id: 1,
                        name: 'GitHub',
                        url: 'https://github.com',
                        description: '全球最大的代码托管平台，提供Git版本控制和协作功能，支持开源和私有项目。',
                        category: '开发工具'
                    },
                    {
                        id: 2,
                        name: '掘金',
                        url: 'https://juejin.cn',
                        description: '一个帮助开发者成长的社区，是给开发者用的 Hacker News，给设计师用的 Designer News，和给产品经理用的 Medium。',
                        category: '技术社区'
                    },
                    {
                        id: 3,
                        name: 'Stack Overflow',
                        url: 'https://stackoverflow.com',
                        description: '全球最大的程序员问答社区，几乎所有编程问题都能在这里找到答案。',
                        category: '技术社区'
                    },
                    {
                        id: 4,
                        name: '知乎',
                        url: 'https://www.zhihu.com',
                        description: '中文互联网高质量的问答社区和创作者聚集的原创内容平台。',
                        category: '社交媒体'
                    },
                    {
                        id: 5,
                        name: 'MDN Web Docs',
                        url: 'https://developer.mozilla.org',
                        description: 'Mozilla开发者网络提供的Web技术权威文档，包括HTML、CSS和JavaScript等。',
                        category: '学习资源'
                    },
                    {
                        id: 6,
                        name: 'Bilibili',
                        url: 'https://www.bilibili.com',
                        description: '国内知名的视频弹幕网站，提供高质量的动画、游戏、科技等内容。',
                        category: '视频平台'
                    },
                    {
                        id: 7,
                        name: 'Vue.js',
                        url: 'https://vuejs.org',
                        description: '渐进式JavaScript框架，用于构建用户界面，易学易用，性能出色。',
                        category: '开发工具'
                    },
                    {
                        id: 8,
                        name: 'React',
                        url: 'https://reactjs.org',
                        description: 'Facebook开发的JavaScript库，用于构建用户界面，特别是单页应用。',
                        category: '开发工具'
                    },
                    {
                        id: 9,
                        name: '豆瓣',
                        url: 'https://www.douban.com',
                        description: '提供图书、电影、音乐唱片的推荐、评论和价格比较，以及城市独特的文化生活。',
                        category: '社交媒体'
                    },
                    {
                        id: 10,
                        name: 'Coursera',
                        url: 'https://www.coursera.org',
                        description: '提供来自世界顶尖大学和机构的在线课程，涵盖各个学科领域。',
                        category: '学习资源'
                    },
                    {
                        id: 11,
                        name: 'YouTube',
                        url: 'https://www.youtube.com',
                        description: '全球最大的视频分享平台，提供海量视频内容，包括教程、娱乐、音乐等。',
                        category: '视频平台'
                    },
                    {
                        id: 12,
                        name: 'CSS-Tricks',
                        url: 'https://css-tricks.com',
                        description: '提供丰富的CSS技巧和教程，帮助开发者掌握前端设计技能。',
                        category: '学习资源'
                    }
                ],
                filteredWebsites: []
            },
            computed: {
                categories() {
                    // 获取所有不重复的分类
                    return [...new Set(this.websites.map(website => website.category))];
                }
            },
            methods: {
                filterWebsites() {
                    const query = this.searchQuery.toLowerCase();
                    this.filteredWebsites = this.websites.filter(website => {
                        const matchesSearch = website.name.toLowerCase().includes(query) || 
                                            website.description.toLowerCase().includes(query);
                        const matchesCategory = this.selectedCategory === '' || website.category === this.selectedCategory;
                        return matchesSearch && matchesCategory;
                    });
                },
                selectCategory(category) {
                    this.selectedCategory = category;
                    this.filterWebsites();
                }
            },
            created() {
                // 初始化显示所有网站
                this.filteredWebsites = [...this.websites];
            }
        });
    </script>
</body>
</html>